<template>
  <div class="vuex-test">
    <h2>Vuex Module 测试页 (demo)</h2>

    <!-- 消息展示与修改 -->
    <div class="row">
      <div class="label">
        <strong>消息内容：</strong>{{ message }}
        <input v-model="newMessageInput" placeholder="输入新消息"/>
        <button @click="updateMessage">更新消息</button>
      </div>
    </div>

    <!-- 同步计数器 -->
    <div class="row">
      <div class="label"><strong>当前计数：</strong>{{ count }}</div>
      <button @click="INCREMENT">+1</button>
    </div>

    <!-- 异步计数器 -->
    <div class="row">
      <div class="label"><strong>双倍计数：</strong>{{ doubleCount }}</div>
      <button @click="incrementAsync">异步 +1</button>
    </div>
  </div>
</template>

<script>
/**
 * Vuex 测试组件
 * 每行展示一个功能，布局清晰
 */
export default {
  data() {
    return {
      newMessageInput: '',
    };
  },
  computed: {
    /**
     * 获取模块中的 message
     * @returns {string}
     */
    message() {
      return this.$store.state.demo.message;
    },

    /**
     * 获取模块中的 count
     * @returns {number}
     */
    count() {
      return this.$store.state.demo.count;
    },

    /**
     * 获取模块中的 doubleCount（getter）
     * @returns {number}
     */
    doubleCount() {
      return this.$store.getters['demo/doubleCount'];
    },
  },
  methods: {
    /**
     * 触发 action 更新消息
     */
    updateMessage() {
      if (this.newMessageInput.trim()) {
        this.$store.dispatch('demo/updateMessage', this.newMessageInput);
      }
    },

    /**
     * 触发 mutation 同步增加 count
     */
    INCREMENT() {
      this.$store.commit('demo/INCREMENT');
    },

    /**
     * 触发 action 异步增加 count
     */
    incrementAsync() {
      this.$store.dispatch('demo/incrementAsync');
    },
  },
};
</script>

<style scoped>
.vuex-test {
  max-width: 500px;
  margin: 30px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.row {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.label {
  margin-bottom: 8px;
  font-size: 14px;
}

input {
  width: 100%;
  padding: 6px;
  margin-bottom: 10px;
}

button {
  align-self: flex-start;
  padding: 6px 12px;
  background-color: #2c3e50;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

button:hover {
  background-color: #34495e;
}
</style>